ES6箭头函数的this指向详解 | 您所在的位置:网站首页 › js callcall › ES6箭头函数的this指向详解 |
之前写过一篇 Larry:Javascript :this关键字 详解,其实只是解释了普通函数的this用法,今天再给大家补充一下箭头函数的this详解。 箭头函数相信大家在日常开发中用到的地方非常之多,因为它很简洁,可读性强,但是它最大的好处,其实是解决了匿名函数的this指向问题,有利于封装回调函数。 先来个总结: 箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象。下面是普通函数的列子: var name = 'window'; // 其实是window.name = 'window' var A = { name: 'A', sayHello: function(){ console.log(this.name) } } A.sayHello();// 输出A var B = { name: 'B' } A.sayHello.call(B);//输出B A.sayHello.call();//不传参数指向全局window对象,输出window.name也就是window从上面可以看到,sayHello这个方法是定义在A对象中的,当当我们使用call方法,把其指向B对象,最后输出了B;可以得出,sayHello的this只跟使用时的对象有关。 改造一下: var name = 'window'; var A = { name: 'A', sayHello: () => { console.log(this.name) } } A.sayHello();// 还是以为输出A ? 错啦,其实输出的是window我相信在这里,大部分同学都会出错,以为sayHello是绑定在A上的,但其实它绑定在window上的,那到底是为什么呢? 一开始,我重点标注了“该函数所在的作用域指向的对象”,作用域是指函数内部,这里的箭头函数,也就是sayHello,所在的作用域其实是最外层的js环境,因为没有其他函数包裹;然后最外层的js环境指向的对象是winodw对象,所以这里的this指向的是window对象。 那如何改造成永远绑定A呢: var name = 'window'; var A = { name: 'A', sayHello: function(){ var s = () => console.log(this.name) return s//返回箭头函数s } } var sayHello = A.sayHello(); sayHello();// 输出A var B = { name: 'B'; } sayHello.call(B); //还是A sayHello.call(); //还是AOK,这样就做到了永远指向A对象了,我们再根据“该函数所在的作用域指向的对象”来分析一下: 该函数所在的作用域:箭头函数s 所在的作用域是sayHello,因为sayHello是一个函数。作用域指向的对象:A.sayHello指向的对象是A。所以箭头函数s 中this就是指向A啦 ~~ ----------------finish------------- 最后是使用箭头函数其他几点需要注意的地方 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。不可以使用yield命令,因此箭头函数不能用作 Generator 函数。逃~ |
CopyRight 2018-2019 实验室设备网 版权所有 |